<template>
	<view class="chengweiTZ">

		<view class="xingming" style="margin-top: 48rpx;">
			<view class="mokuai">
				<view class="name">
					您的姓名*：
				</view>
				<input v-model="user.realName" class="tianxie" placeholder="此处为姓名" type="text" value="" />
			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai">
				<view class="name">
					身份证号*：
				</view>
				<input v-model="user.idCard" class="tianxie" placeholder="此处为身份证号" type="text" value="" />
			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai">
				<view class="name">
					银行卡号：
				</view>
				<input v-model="user.bankCardNumber" class="tianxie" placeholder="此处为银行卡号" type="number" value="" />
			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai">
				<view class="name">
					开户行：
				</view>
				<input v-model="user.bankCardAddress" class="tianxie" placeholder="此处为开户行" type="text" value="" />
			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai">
				<view class="name">
					身份证照片*：
				</view>
			</view>
			<view class="tupian">
				<view class="uni-uploader__files">
					<block v-for="(image,imgIndex) in orderDetail.skuList" :key="imgIndex">
						<view class="uni-uploader__file" style="position: relative;">
							<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
							<view class="close-view" @click="close( index, imgIndex)">x</view>
						</view>
					</block>
					<view class="uni-uploader__input-box" v-if="orderDetail.skuList.length <2">
						<view class="uni-uploader__input" @tap="chooseImg()"></view>
					</view>
				</view>
			</view>

		</view>
		<view class="xingming" style="margin-top: 16rpx;">
			<view class="mokuai">
				<view class="name">
					常驻地址*：
				</view>
				<input v-model="user.realAddress" class="tianxie" placeholder="此处为常驻地址" type="text" value="" />
			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai">
				<view class="name">
					职业*：
				</view>
				<input v-model="user.occupation" class="tianxie" placeholder="此处为职业" type="text" value="" />
			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai" style="height: 100rpx;">
				<view class="name">
					有无门面*：
				</view>
				<!-- <input class="tianxie" placeholder="此处为职业" type="text" value="" /> -->
				<evan-radio v-model="baseValue" label="1">有</evan-radio>
				<evan-radio style="margin-left:30rpx;" v-model="baseValue" label="2">无</evan-radio>

			</view>
			<!-- <view class="xuxian"></view> -->
			<view class="mokuai">
				<view class="name" v-show="baseValue==1">
					微信收款码*：
				</view>
			</view>
			<view class="tupian" v-show="baseValue==1">
				<view class="uni-uploader__files">
					<block v-for="(image,imgIndex) in orderDetail.skuListMM" :key="imgIndex">
						<view class="uni-uploader__file" style="position: relative;">
							<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
							<view class="close-view" @click="closeMM( index, imgIndex)">x</view>
						</view>
					</block>
					<view class="uni-uploader__input-box" v-if="orderDetail.skuListMM.length <1">
						<view class="uni-uploader__input" @tap="chooseImgMM()"></view>
					</view>
				</view>
			</view>

		</view>
		<view class="lijishenq" @click="lijishneBtn">
			立即申请
		</view>
		<view class="ruhe">

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					isChief: 0,
					realName: '', //姓名
					idCard: '', //身份证
					bankCardNumber: '', //银行卡号
					bankCardAddress: '', //开户行地址
					idCardFront: '', //身份证正面照
					idCardBack: '', //身份证反面照
					occupation: '', //职业
					realAddress: '', //常驻地址
					facade: '', //门店
					id: '', //用户id
				},
				baseValue: '1',

				orderDetail: {
					skuList: [],
					skuListMM: [] //门面数据
				},
				imageList: [],
				index: 0,
				list: [],
				userInfotz: {},
			}
		},
		mounted() {

		},
		onShow() {
			this.userInfotz = uni.getStorageSync('userInfo')
			console.log("userInfotz", this.userInfotz)
			console.log('this.orderDetail.skuList', this.orderDetail.skuList.length)
		},
		methods: {
			//立即申请
			lijishneBtn() {
				
				this.user.id = this.userInfotz.id
				if (this.baseValue == '2') {
					this.user.facade = ''
				}
				if (!this.user.realName) {
					this.$api.msg('姓名不能为空')
					return
				}
				if (!this.user.idCard) {
					this.$api.msg('身份证不能为空')
					return
				}
				// if (!this.user.bankCardNumber) {
				// 	this.$api.msg('银行卡不能为空')
				// 	return
				// }
				// if (!this.user.bankCardAddress) {
				// 	this.$api.msg('开户行不能为空')
				// 	return
				// }
				if (!this.user.idCardFront) {
					this.$api.msg('身份证不能为空')
					return
				}
				if (!this.user.idCardBack) {
					this.$api.msg('身份证不能为空')
					return
				}

				uni.showLoading({

				})
				var that = this


				that.$api.request('user', 'updateUserInfo', {
					user: JSON.stringify(that.user)
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if (res.errno == '200') {
						uni.hideLoading()
						that.$api.msg(res.errmsg)
						uni.setStorageSync('shenhezhong', 1)

						uni.switchTab({
							url: '/pages/user/user'
						});

					}
				})


			},
			//门面删除
			closeMM(index, imgIndex) {
				console.log('下表', imgIndex)
				this.orderDetail.skuListMM.splice(imgIndex, 1);
				this.user.facade = ''
			},
			close(index, imgIndex) {
				console.log('下表', imgIndex)
				this.orderDetail.skuList.splice(imgIndex, 1);
				if (this.orderDetail.skuList) {
					this.user.idCardFront = this.orderDetail.skuList[0]
					this.user.idCardBack = this.orderDetail.skuList[1]
				}

			},
			previewImage() { //预览图片
				uni.previewImage({
					urls: this.orderDetail.skuList
				});
			},
			chooseImgMM() { //门面数据
				console.log('上传中')
				const that = this
				that.$api.uploadImg(2, (res) => {
					that.orderDetail.skuListMM.push(res)
					that.user.facade = res
				})
			},
			chooseImg() { //选择图片

				const that = this
				that.$api.uploadImg(2, (res) => {
					that.orderDetail.skuList.push(res)
					if (that.orderDetail.skuList) {
						that.user.idCardFront = that.orderDetail.skuList[0]
						that.user.idCardBack = that.orderDetail.skuList[1]
					}
					console.log('1111', res);
				})
			},
			showAll(e) {
				let that = this
				that.$api.request('coupon', 'getUserCoupons', {
					couponType: 1,
					status: e + 1
				}, failres => {
					that.logining = false
					that.$api.msg(failres.errmsg)
				}).then(res => {
					this.list = res.data
					console.log(this.list)

				})
			},

			useCou() {
				uni.switchTab({
					url: "../category/category"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.chengweiTZ {
		width: 750rpx;
		height: 100%;

		.ruhe {
			margin-top: 48rpx;
			margin-left: 24rpx;
			width: 702rpx;
			height: 300rpx;
			// background-image: url(../../static/user/ruhezhuanq.png);
			background-size: 100% 100%;

		}

		.lijishenq {
			width: 702rpx;
			height: 80rpx;
			background: #69CC30;
			border-radius: 4rpx;
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 48rpx;
		}

		.close-view {
			text-align: center;
			line-height: 14px;
			height: 16px;
			width: 16px;
			border-radius: 50%;
			background: #FF5053;
			color: #FFFFFF;
			position: absolute;
			top: -6px;
			right: -4px;
			font-size: 12px;
		}

		/* 上传 */
		.uni-uploader {
			flex: 1;
			flex-direction: column;
		}

		.uni-uploader-head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.uni-uploader-info {
			color: #B2B2B2;
		}

		.uni-uploader-body {
			margin-top: 16upx;
		}

		.uni-uploader__files {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.uni-uploader__file {
			margin: 12rpx;
			width: 160rpx;
			height: 108rpx;
		}

		.uni-uploader__img {
			display: block;
		width: 160rpx;
		height: 108rpx;
		}

		.uni-uploader__input-box {
			position: relative;
			margin: 10upx;
			width: 160rpx;
			height: 108rpx;
			border: 2upx solid #D9D9D9;
		}

		.uni-uploader__input-box:before,
		.uni-uploader__input-box:after {
			content: " ";
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			background-color: #D9D9D9;
		}

		.uni-uploader__input-box:before {
			width: 4upx;
			height: 79upx;
		}

		.uni-uploader__input-box:after {
			width: 79upx;
			height: 4upx;
		}

		.uni-uploader__input-box:active {
			border-color: #999999;
		}

		.uni-uploader__input-box:active:before,
		.uni-uploader__input-box:active:after {
			background-color: #999999;
		}

		.uni-uploader__input {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}

		.xingming {
			margin-left: 24rpx;
			padding-top: 10rpx;
			width: 702rpx;
			padding-bottom: 20rpx;
			background: rgba(234, 234, 234, 0.11);
			box-shadow: 0px 2rpx 40rpx 0px #EFEFEF;
			border-radius: 4rpx;

			.tupian {
				width: 702rpx;
				padding-left: 24rpx;
				padding-right: 24rpx
			}

			.xuxian {
				width: 638rpx;
				height: 2rpx;
				margin-left: 28rpx;
				border-bottom: 2rpx dashed #999999;
			}

			.mokuai {
				height: 90rpx;
				width: 702rpx;
				padding-left: 32rpx;
				padding-right: 32rpx;

				display: flex;
				align-items: center;

				.tianxie {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333330;
				}

				.name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

			}
		}
	}
</style>
